<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
    <div>
        <el-row class='row-bg' type='flex' align='middle'>
            <span>报价测算模块为您展示了当前已有的报价测算信息，同时，您也可以通过该模块新建/导入报价资料。</span>
        </el-row>
        <el-card>
            <ft-pagination :current-page='pageIndex' :page-size='pageSize' :total='totlePage' @pageChange='loadPage'>
                <div slot='toolbar' class='toolbar-button'>
                    <el-button type='primary' size='small' icon='el-icon-refresh' @click='refreshRows'>刷新</el-button>
                    <el-button class='add-button' type='primary' size='small' icon='el-icon-plus' @click='addRow'>新建</el-button>
                    <el-input class='filter-input' size='small' v-model.lazy='filterContent' placeholder='根据方案名称查询...' @change='filterContentChange'></el-input>
                </div>
                <el-table :data='quoteCalculatorArray' v-loading='loading'>
                    <el-table-column min-width='120' align='left' label='方案名称'>
                        <template slot-scope='scope'>
                            <el-button type='text' style='color:#0B69E0' @click='changeToDetail(scope.$index, scope.row)'>{{scope.row.quoteName}}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column min-width='120' align='right' label='融资金额' prop='financingAmount'>
                        <template slot-scope='scope'>
                            <ft-number-input v-model='scope.row.financingAmount' :editable='false'></ft-number-input>
                        </template>
                    </el-table-column>
                    <el-table-column min-width='120' align='center'  label='租赁方式' prop='leaseMode.label'></el-table-column>
                    <el-table-column min-width='120' align='right' label='收益XIRR'   prop='rentIrr'>
                        <template slot-scope='scope'>
                            <ft-number-input v-model='scope.row.rentIrr' :precision='[10,6]' :percent='true' :editable='false'></ft-number-input>
                        </template>
                    </el-table-column>
                    <el-table-column min-width='120' align='right' label='计划投放日期' prop='planLoanDate'></el-table-column>
                    <el-table-column min-width='120' align='right' label='报价利率' prop='interestRate'>
                        <template slot-scope='scope'>
                            <ft-number-input v-model='scope.row.interestRate' :precision='[10,6]' :percent='true' :editable='false'></ft-number-input>
                        </template>
                    </el-table-column>
                    <el-table-column min-width='120' align='center'  label='报价算法' prop='leaseAlgorithm.label'></el-table-column>
                    <el-table-column min-width='120' align='center' label='操作'>
                        <template slot-scope='scope'>
                            <el-button type='text' size='small' @click='copyRow(scope.$index, scope.row)'>复制</el-button>
                            <el-popover title='确认' placement='top' width='200' v-model='scope.row.delVisible'>
                                <p>确认要删除该数据吗? 删除后无法恢复！</p>
                                <div class='delete-group'>
                                    <el-button size='small' type='text' @click='scope.row.delVisible=false'>取消</el-button>
                                    <el-button  style='background:#B94A48' size='small' @click='deleteRow(scope.$index, scope.row)'>
                                        <span style='color: #FFFFFF'>确定</span>
                                    </el-button>
                                </div>
                                <span slot='reference' class='delete-button'>
                                    <el-button type='text' size='small' style='color:#B94A48'>删除</el-button>
                                </span>
                            </el-popover>
                        </template>
                    </el-table-column>
                </el-table>
            </ft-pagination>
        </el-card>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                // 查询的内容
                filterContent: '',
                // 加载标识
                loading: false,
                // 分页的选项
                totlePage: 0,
                pageIndex: 1,
                pageSize: 8,

                // 查询的结果集
                quoteCalculatorArray: [],
            }
        },

        methods: {
            // 分页加载数据
            loadPage(pageIndex,pageSize){
                this.pageIndex = pageIndex
                this.pageSize = pageSize
                this.request()
            },

            // 刷新
            refreshRows() {
                this.request()
            },

            // 查询条件发生变化
            filterContentChange() {
                this.pageIndex = 1
                this.pageSize = 8
                this.request()
            },

            // 分页查询
            request() {
                this.loading = true
                const url = '/joys-rest/joys-calculate/calculator/list/page'
                const params = {
                    pageIndex: this.pageIndex,
                    pageSize: this.pageSize
                }
                this.$http.post(url, this.filterContent, {params}).then(
                    resp => {
                        if(resp.ok){
                            this.totlePage = resp.body.total
                            this.quoteCalculatorArray = resp.body.rows
                        }
                        this.loading = false
                    },
                    resp => {
                        this.loading = false
                        this.$message.error(resp.body.message)
                    }
                )
            },

            // 新增
            addRow() {
                this.$emit('addCalculator')
            },

            // 列表跳详情
            changeToDetail(index, row) {
                this.$emit('changeToDetail', row.quoteCalculatorId)
            },

            // 列表删除
            deleteRow(index, row) {
                this.deleteData(index, row).then(() => {
                    if(this.quoteCalculatorArray.length === 0 && this.pageIndex > 1) {
                        this.pageIndex --
                        this.request()
                    }
                }).catch((e) => {
                    this.$message.error(e)
                })
            },

            // 向后端发送删除请求
            deleteData(index, row) {
                return new Promise((resolve, reject) => {
                    const url = `/joys-rest/joys-calculate/calculator/all/${row.quoteCalculatorId}`
                    this.$http.delete(url).then(
                        resp => {
                            if (resp.ok) {
                                this.quoteCalculatorArray.splice(index, 1)
                                this.totlePage--
                            }
                            resolve()
                        },
                        resp => {
                            reject(resp.body.message)
                        }
                    )
                })
            },

            // 列表复制
            copyRow(index, row) {
                this.loading = true
                const url = '/joys-rest/joys-calculate/calculator/all/copy'
                const params = {
                    id: row.quoteCalculatorId,
                }
                this.$http.post(url, null, {params}).then(
                    resp => {
                        this.loading = false
                        this.request()
                        this.$message.success( '复制成功！')
                    },
                    resp => {
                        this.loading = false
                        this.$message.error(resp.body.message)
                    }
                )
            }
        }
    }
</script>
<style scoped>
    .row-bg {
        height: 50px;
        padding-left: 20px;
        font-size: 13px;
        background-color: #E4E8EB
    }

    .toolbar-button {
        float: left
    }

    .toolbar-button .add-button {
        margin-left: 12px
    }

    .toolbar-button .filter-input {
        width: 288px;
        margin-left: 72px
    }

    .delete-group {
        text-align: right
    }

    .delete-button {
        margin-left: .10rem
    }

    .operate-button{
        text-align: right;
        margin: 16px 36px 20px 0;
    }

    .button-save{
        margin-left: 24px;
    }

</style>
